package modules.componentpanel.htmlcomponents
{
	import spark.components.BorderContainer;
	import spark.layouts.BasicLayout;
	import spark.layouts.HorizontalLayout;
	import spark.layouts.VerticalLayout;
	import spark.layouts.supportClasses.LayoutBase;

	public class HTMLLayoutBase extends BorderContainer implements HTMLDataInterface
	{
		public function HTMLLayoutBase()
		{
			super();
		}

		protected var _data:Object;

		public function get data():Object
		{
			throw Error("sub class must override this method");
		}


		public function set data(newData:Object):void
		{
			this._data=newData;
			//update visible content with data
			if (newData)
			{
				updateDisplayByType();
				updateSize();
			}
		}

		private function updateSize():void
		{
			var width:String=this._data.width as String;
			if (width.indexOf("%") != -1)
			{
				this.percentWidth=Number(width.replace("%", ""));
			}
			else
			{
				this.width=Number(width);
			}

			var height:String=this._data.height as String;
			if (height.indexOf("%") != -1)
			{
				this.percentHeight=Number(height.replace("%", ""));
			}
			else
			{
				this.height=Number(height);
			}
		}

		/**
		 * update Display related to type
		 */
		private function updateDisplayByType():void
		{
			var type:String=this.data.type;
			var layout:LayoutBase;
			if (GlobalConfig.LAYOUT_TYPE_BASIC == type)
			{
				//BasicLayout
				layout=new BasicLayout();
				this.setStyle("borderColor", GlobalConfig.LAYOUT_BORDER_COLOR_RED);
				updateBasicLayoutChildren();
			}
			else if (GlobalConfig.LAYOUT_TYPE_VERTICAL == type)
			{
				//VerticalLayout
				layout=new VerticalLayout();
				this.setStyle("borderColor", GlobalConfig.LAYOUT_BORDER_COLOR_BLUE);
				VerticalLayout(layout).gap=1;
				updateNoneBasicLayoutChildren();
			}
			else
			{
				//HorizontalLayout
				layout=new HorizontalLayout();
				this.setStyle("borderColor", GlobalConfig.LAYOUT_BORDER_COLOR_GREEN);
				HorizontalLayout(layout).gap=1;
				updateNoneBasicLayoutChildren();
			}
			this.layout=layout;
		}

		private function updateBasicLayoutChildren():void
		{
			for (var i:int=0; i < this.numElements; i++)
			{
				var child:HTMLDataInterface=this.getElementAt(i) as HTMLDataInterface;
				if (child)
				{
					var newData:Object=child.data;
					newData.x=0;
					newData.y=0;
					child.data=newData;
				}
			}
		}

		private function updateNoneBasicLayoutChildren():void
		{
			for (var i:int=0; i < this.numElements; i++)
			{
				var child:HTMLDataInterface=this.getElementAt(i) as HTMLDataInterface;
				if (child)
				{
					var newData:Object=child.data;
					newData.x=null;
					newData.y=null;
					child.data=newData;
				}
			}
		}
	}
}
